<template>
<!-- 一个商家 -->
	<div class="shop" @click="goDetails">
		<img :src="shop.image_path" >
		<div class="righer">
			<div class="title">
				<span class="tag" v-if="shop.is_premium">品牌</span>
				<div class="shopName">{{shop.name}}</div>
			</div>
			<div class="stars">
				<div class="rates">
					<van-rate
						v-model="shop.rating" 
						color="#FBD81C" 
						icon="star" 
						allow-half
						size="16"
						gutter="0"
						readonly
					/>
					<div class="rateScore">{{shop.rating}}</div>
					<div class="orderNum">月售{{shop.recent_order_num}}单</div>
				</div>
				<div class="tag">达达专送</div>
			</div>
			<!-- 配送费 -->
			<div class="psf">
				<div>￥{{shop.float_minimum_order_amount}}起送</div>
				<div>/</div>
				<div>配送费约￥{{shop.float_delivery_fee}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:["shop"],
		data() {
			return {
				
			}
		},
		methods:{
			goDetails(){
				this.$router.push(`/merchant?merchantId=${this.shop.id}`)
			}
		},	
		mounted(){
			
		}
	}
</script>

<style lang="scss" scoped>
@import "../scss/GLOBAL.scss";
.shop {
	margin-bottom: 1.25em;
	user-select: none;
	display: flex;
	align-items: center;
	img {
		width: 5.63em;
		height: 100%;
		margin-right: .8em;
	}
	.righer {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title {
			padding-bottom: $shopItemPading-col;
			display: flex;
			align-items: center;
			.tag {
				background-color: #FBD81C;
				font-size: .9em;
				padding: 2px 8px;
			}
			.shopName {
				margin-left: .5em;
				font-weight: bold;
			}
		}
		.stars {
			padding-bottom: $shopItemPading-col;
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-between;
			.rates {
				width: 13em;
				display: flex;
				align-items: center;
				font-size: .9em;
				.rateScore {
					margin: 0 5px;
				}
			}
			.tag {
				font-size: .8em;
				background-color: $themeColor;
				padding: 2px 3px;
				color: #fff;
			}
		}
		.psf {
			display: flex;
			align-items: center;
			font-size: .9em;
		}
	}
}
</style>